
<%= react_component("ManualRenderApp", props: { prerender: false }, prerender: false) %>
<hr/>

<h2>Using Renderer Functions to Manually Render Your App</h2>
<ul>
  <li>
    <p>Use react_component the same way you would if you were registering a Render-Function or component:</p>
    <pre>
  <%%= react_component("ManualRenderApp", props: { prerender: false }, prerender: false) %>
    </pre>
    <h4>spec/dummy/app/views/pages/client_side_manual_render.html.erb</h4>
    <br>
  </li>

  <li>
    <p>Use register to expose the rendering function to ReactOnRails:</p>
    <pre>
  import ManualRenderApp from './ManualRenderAppRenderer';

  ReactOnRails.register({
    ManualRenderApp,
  });
    </pre>
    <h4>spec/dummy/client/app/packs/client-bundle.js</h4>
    <br>
  </li>

  <li>
    <p>A renderer is a function that accepts props, railsContext, domNodeId:</p>
    <pre>
  const ManualRenderApp = (props, railsContext, domNodeId) => {
    const reactElement = (
      <%= '<div>' %>
        <%= '<h1>Manual Render Example</h1>' %>
        <%= '<p>If you can see this, you can register renderer functions.</p>' %>
      <%= '</div>' %>
    );

    ReactDOM.render(reactElement, document.getElementById(domNodeId));
  };
    </pre>
    <h4>spec/dummy/client/app/startup/ManualRenderAppRenderer.jsx</h4>
    <br>
  </li>
</ul>

<p>
  One possible use case for this is
  <a href="https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/code-splitting.md"> Code Splitting</a>.
</p>
